<template>
<div>
    <div
      class="search_template"
      style="background:white;height:120px;"
    >
      <div
        class="content"
        style="height: 80px; display: flex; justify-content: space-around;align-items: center;">
        <div>
          <span style="color:#888; font-weight:800;">组织名称:</span>
          <el-input
            v-model="search"
            placeholder="请输入组织名称搜索"
            @keyup.enter.native="onEnterSearch"
            style="width:200px;height50px;"
          />
        </div>
        <div align="right">
          <el-button size="mini" icon="el-icon-search" type="success" @click="onEnterSearch">点击查询</el-button>
        </div>
      </div>
      <!-- <div align="left" style="margin-left:10px">
        <el-button size="mini" type="primary" plain icon="el-icon-plus" @click="dialogFormVisible_two = true">新增</el-button>
      </div> -->
    </div>
	<el-container style="height: 500px;;border: 1px solid #eee">
		<el-container
			style="width:200px;margin-right:5px;overflow-y:scroll;padding-left: 10px;padding-right: 20px;background: #fff;padding-top:5px"
		>
			<el-tree :data="data" ref="tree_one" :accordion="true" node-key="id" @node-click="getCheckedKeys"></el-tree>
		</el-container>
		<el-container>
			<!-- <router-view></router-view> -->
			<el-table :data="tableData" border  style="width: 100%">
				<el-table-column align="center" label="上级组织" prop="parentName"></el-table-column>
				<el-table-column align="center" label="组织名称" prop="deptName"></el-table-column>
				<el-table-column align="center" label="组织编码" prop="deptCode"></el-table-column>
				<el-table-column align="center" label="组织负责人" prop="leader"></el-table-column>
				<el-table-column align="center" label="备注" prop="remark"></el-table-column>
				<el-table-column align="center" label="状态" prop="status" ></el-table-column>
				<el-table-column align="center" width="300" label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" plain @click="add_add_organization(scope.row)">新增</el-button>
						<el-button size="mini" type="primary" plain @click="modify_display(scope.row.deptId)">修改</el-button>
						<el-button size="mini" type="danger" plain @click="open(scope.row.deptId)">禁用</el-button>
						<el-button size="mini" type="danger" plain @click="organization_delect(scope.row.deptId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- <el-dialog title="新增功能" :visible.sync="dialogFormVisible_two">
			
			<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
			  <el-form-item
			    prop="new_role_name"
			    label="角色名称"
			    :rules="[
			      { required: true, message: '请输入角色名称', trigger: 'blur' },
			    
			    ]"
			  >
			    <el-input v-model="dynamicValidateForm.new_role_name"></el-input>
			  </el-form-item>
			  <el-form-item
			    prop="name_code"
			    label="角色编码"
			    :rules="[
			      { required: true, message: '请输入角色编码', trigger: 'blur' },
			    
			    ]"
			  >
			    <el-input v-model="dynamicValidateForm.name_code"></el-input>
			  </el-form-item>
			 
			    <el-form-item label="角色描述" 
				prop="desc"
				:rules="[
				  { required: true, message: '请输入角色描述', trigger: 'blur' },
				
				]"
				>
			      <el-input type="textarea" v-model="dynamicValidateForm.desc"
				
				  ></el-input>
				  
			    </el-form-item>
			
				<el-form-item label="角色权限"
				:rules="[
				  { required: true, message: '请选择角色权限', trigger: 'blur' },
				
				]"
				>
				 
				     <el-tree
				        :data="data"
				        show-checkbox
				        node-key="id"
				        ref="tree"
				        :expand-on-click-node="false"
				        :render-content="renderContent">
				      </el-tree>
			
				</el-form-item>
			 
			</el-form>
			
		  <div slot="footer" class="dialog-footer">
			  <el-button @click="dialogFormVisible_two = false">取消</el-button>
			  <el-button type="primary" @click="new_onSubmit(dynamicValidateForm)">确定</el-button>
			   
		
		  </div>
			</el-dialog>-->
			<!--新增功能-->
			<el-dialog title="新增功能" :visible.sync="dialogFormVisible_two" :before-close="close">
				<el-form
					:model="dynamicValidateForm"
					ref="dynamicValidateForm"
					label-width="100px"
					class="demo-dynamic"
				>
					<el-form-item prop="parentName_modify" label="上级组织">
						<el-input :disabled="true" v-model="dynamicValidateForm.parentName_modify"></el-input>
					</el-form-item>
					<el-form-item
						prop="deptName_modify"
						label="组织名称"
						:rules="[
				     { required: true, message: '请输入组织名称', trigger: 'blur' },
				   
				   ]"
					>
						<el-input v-model="dynamicValidateForm.deptName_modify"></el-input>
					</el-form-item>
					<el-form-item
						prop="deptCode_modify"
						label="组织编码"
						:rules="[
				     { required: true, message: '请输入组织编码', trigger: 'blur' },
				   
				   ]"
					>
						<el-input v-model="dynamicValidateForm.deptCode_modify"></el-input>
					</el-form-item>
					<el-form-item
						prop="leader_modify"
						label="组织负责人"
						:rules="[
				        { required: true, message: '请输入组织负责人', trigger: 'blur' },
				      
				      ]"
					>
						<el-input v-model="dynamicValidateForm.leader_modify"></el-input>
					</el-form-item>
					<el-form-item
						prop="remark_modify"
						label="备注"
						:rules="[
				    { required: true, message: '请输入备注', trigger: 'blur' },
				  
				  ]"
					>
						<el-input v-model="dynamicValidateForm.remark_modify"></el-input>
					</el-form-item>
					<el-form-item prop="status" label="状态">
						<!--开关-->
						<el-switch
							v-model="value2"
							active-text="禁用"
							inactive-text="正常"
							active-value="1"
							inactive-value="0"
						></el-switch>
						<!--开关-->
					</el-form-item>
					<!-- </el-form-item> -->
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="new_onSubmit(dynamicValidateForm)">确定</el-button>
					<el-button @click="close">取消</el-button>
					<!-- <el-button @click="dialogFormVisible_two = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormVisible_two = false">确 定</el-button>-->
				</div>
			</el-dialog>
			<!--新增功能-->
			<!--修改功能-->
			<el-dialog title="修改功能" :visible.sync="dialogFormVisible_three">
				<el-form
					:model="dynamicValidateForm_modify"
					ref="dynamicValidateForm_modify"
					label-width="100px"
					class="demo-dynamic"
				>
					<el-form-item prop="parentName_modify" label="上级组织">
						<el-input :disabled="true" v-model="dynamicValidateForm_modify.parentName_modify"></el-input>
					</el-form-item>
					<el-form-item
						prop="deptName_modify"
						label="组织名称"
						:rules="[
			     { required: true, message: '请输入组织名称', trigger: 'blur' },
			   
			   ]"
					>
						<el-input v-model="dynamicValidateForm_modify.deptName_modify"></el-input>
					</el-form-item>
					<el-form-item
						prop="deptCode_modify"
						label="组织编码"
						:rules="[
			     { required: true, message: '请输入组织编码', trigger: 'blur' },
			   
			   ]"
					>
						<el-input v-model="dynamicValidateForm_modify.deptCode_modify"></el-input>
					</el-form-item>
					<el-form-item
						prop="leader_modify"
						label="组织负责人"
						:rules="[
			        { required: true, message: '请输入组织负责人', trigger: 'blur' },
			      
			      ]"
					>
						<el-input v-model="dynamicValidateForm_modify.leader_modify"></el-input>
					</el-form-item>
					<el-form-item
						prop="remark_modify"
						label="备注"
						:rules="[
			    { required: true, message: '请输入备注', trigger: 'blur' },
			  
			  ]"
					>
						<el-input v-model="dynamicValidateForm_modify.remark_modify"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<!--开关-->
						<el-switch
							v-model="value1"
							active-text="禁用"
							inactive-text="正常"
							active-value="1"
							inactive-value="0"
						></el-switch>
						<!--开关-->
					</el-form-item>
					<!-- </el-form-item> -->
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="onSubmit_modify(dynamicValidateForm_modify)">确定</el-button>
					<el-button @click="dialogFormVisible_three = false">取消</el-button>
					<!-- <el-button @click="dialogFormVisible_two = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormVisible_two = false">确 定</el-button>-->
				</div>
			</el-dialog>
			<!--修改功能-->
		</el-container>
	</el-container>
    <el-container style="margin-top:20px;margin-bottom:20px;float:right;margin-right:20px">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[5, 10, 20, 40]"
				:page-size="pagesize"
				layout="total,sizes, prev, pager, next, jumper"
				:total="total_one"
			></el-pagination>
		</el-container>
        </div>
</template>
<style>
.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>

<script>
import {
    getUserInfo,
    deleteUser,
    getUserJurisdiction,
    add_role_role,
    get_role_jurisdiction,
    getModifyUserInfo,
    modify_role_role,
    get_organization_tree,
    get_organization_list,
    modify_organization,
    prohibit_organization,
    add_organization,
    delect_organization,
    delectSearch
} from '@/api/user';
export default {
    data() {
        return {
            tableData: [],
            search: '',
            dialogTableVisible: false,
            dialogFormVisible: false,
            dialogTableVisible_two: false,
            dialogFormVisible_two: false,
            dialogTableVisible_three: false,
            dialogFormVisible_three: false,
            /*****添加功能的form******/
            dynamicValidateForm: {
                // parentName_modify:"",
                deptName_modify: '',
                deptCode_modify: '',
                leader_modify: '',
                remark_modify: ''
            },
            value1: 0,
            value2: 0,
            /******添加功能的form****/
            /******修改的form*******/
            dynamicValidateForm_modify: {
                deptName_modify: '',
                deptCode_modify: '',
                leader_modify: '',
                remark_modify: ''
            },
            role_id_id: '',
            /******修改的form*******/
            currentPage: 1,
            pagesize: 10,
            total_one: 0,
            data: [],
            /********显示组织机构***********/
            organization_table: []
            /********显示组织机构*********/
        };
    },

    /********获取用户列表***********/
    created() {
        /********获取它的权限*********/
        /**********获取添加角色里的权限************/
        var data_data = {
            deptId: 1
        };

        get_organization_tree(data_data)
            .then(response => {
                if (response.data.code == 200) {
                    this.data = response.data.depts;
                } else {
                    this.$message.error(response.data.msg);
                }
            })
            .catch(() => {});
        /**********获取添加角色里的权限***********/
    },
    /********获取用户列表**********/
    /**********删除功能***************/
    methods: {
        /******新增功能******/
        close() {
            this.$refs.dynamicValidateForm.resetFields();
            this.dialogFormVisible_two = false;
            this.value2 = 0;
        },
        /******新增功能*****/
        /******导航栏跳转功能********/
        handleSelect() {
            this.$router.push({ path: '/article' });
        },

        /******导航栏跳转功能*********/
        open(index) {
            this.$confirm('您确定要禁用这个部门吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    /*****点击了确认*******/

                    var roleId = {
                        deptId: index,
                        status: 1
                    };
                    prohibit_organization(roleId)
                        .then(response => {
                            if (response.data.code == 200) {
                                this.organization_list(index);
                                this.$message({
                                    message: '禁用成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(() => {});
                    /******点击了确认********/
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
        },
        /********禁用功能****************/
        /********删除********/
        organization_delect(index) {
            this.$confirm('您确定要删除这个部门吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    /*****点击了确认*******/

                    var roleId = {
                        deptId: index
                    };
                    delect_organization(roleId)
                        .then(response => {
                            if (response.data.code == 200) {
                                // this.organization_list(index)
                                this.tableData = '';
                                this.load_tree();
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(() => {});
                    /******点击了确认********/
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
        },
        /*****删除********/

        /**********修改功能数据回显*************/

        onSubmit() {},

        /**********修改功能数据回显*************/
        /*******树形结构********/
        renderContent(h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                    <span>{node.label}</span>
                </span>
            );
        },

        /********树形结构**********/
        /***********调出新增框*************/
        add_add_organization(role_id) {
            this.dialogFormVisible_two = true;
            this.role_id_id = role_id.deptId;
            this.dynamicValidateForm.parentName_modify = role_id.deptName;
        },
        /************调出新增框*************/
        /**********添加角色的功能**********/
        new_onSubmit(dynamicValidateForm) {
            this.dialogFormVisible_two = false;
            // this.$refs[dynamicValidateForm].validate((valid) => {

            var new_add_params = {
                parentId: this.role_id_id,
                deptName: dynamicValidateForm.deptName_modify,
                deptCode: dynamicValidateForm.deptCode_modify,
                leader: dynamicValidateForm.leader_modify,
                remark: dynamicValidateForm.remark_modify,
                status: this.value2
            };

            this.$refs.dynamicValidateForm.validate(valid => {
                this.$refs['dynamicValidateForm'].resetFields();
                if (valid) {
                    add_organization(new_add_params)
                        .then(response => {
                            if (response.data.code == 200) {
                                /*********重新加载树************/
                                this.tableData = '';
                                this.load_tree();
                                /*********重新加载树***********/
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(() => {});
                } else {
                    this.$message.error('缺少必要的参数');
                }
            });

            /*******调用新增接口*********/
        },
        /*********添加角色的功能**************/

        /**********角色修改功能*************/
        /********修改数据回显********/
        modify_display(role_id) {
            this.role_id_id = role_id;
            this.dialogFormVisible_three = true;
            var getUserInfo_params = {
                deptId: role_id
            };

            get_organization_list(getUserInfo_params)
                .then(response => {
                    if (response.data.code == 200) {
                        this.dynamicValidateForm_modify.parentName_modify = response.data.data.parentName;
                        this.dynamicValidateForm_modify.deptName_modify = response.data.data.deptName;
                        this.dynamicValidateForm_modify.deptCode_modify = response.data.data.deptCode;
                        this.dynamicValidateForm_modify.leader_modify = response.data.data.leader;
                        this.dynamicValidateForm_modify.remark_modify = response.data.data.remark;
                        this.value1 = response.data.data.status;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        },
        /********修改数据的回显********/
        onSubmit_modify(dynamicValidateForm_modify) {
            this.dialogFormVisible_three = false;
            // this.$refs[dynamicValidateForm].validate((valid) => {

            var new_add_params = {
                deptId: this.role_id_id,
                deptName: dynamicValidateForm_modify.deptName_modify,
                deptCode: dynamicValidateForm_modify.deptCode_modify,
                leader: dynamicValidateForm_modify.leader_modify,
                remark: dynamicValidateForm_modify.remark_modify,
                status: this.value1
            };

            this.$refs.dynamicValidateForm_modify.validate(valid => {
                this.$refs['dynamicValidateForm_modify'].resetFields();
                if (valid) {
                    modify_organization(new_add_params)
                        .then(response => {
                            if (response.data.code == 200) {
                                this.organization_list(this.role_id_id);
                                // this.getCheckedKeys(this.role_id_id)
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(() => {});
                } else {
                    this.$message.error('缺少必要的参数');
                }
            });

            /*******调用新增接口*********/
        },
        /*********角色修改功能************/
        /********组织机构的js*************/
        getCheckedKeys(id) {
            var deptId = id.id;
            this.organization_list(deptId);
        },
        //加载组织列表
        organization_list(deptId) {
            // get_organization_list

            var params_list = {
                pageNum: this.currentPage,
                pageSize: this.pagesize,
                deptId: deptId
            };
            // var params_list=deptId

            // var params_list=deptId
            get_organization_list(params_list)
                .then(response => {
                    if (response.data.code == 200) {
                        this.tableData = [response.data.data];
                        this.total_one = response.data.data.total;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        },
        /**********组织机构的js**********/
                /************模糊查询搜索功能***************/
        onEnterSearch(e, searchVal) {
            /***********调用模糊查询接口***************/
            var new_add_params = {
                pageNum: 1,
                pageSize: 10,
                deptName: this.search
            };
            console.log(this.search)
            delectSearch(new_add_params)
                .then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data;
                        this.$message({
                            message: '查询成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
            /*********调用模糊查询的接口**************/
        },
        /**********模糊查询搜索功能****************/
        /************分页的数据***************/
        handleSizeChange: function(size) {
            this.pagesize = size;
            // this.organization_list();
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
            // this.organization_list();
        },
        /************分页的数据*************/
        /************加载组织树*****************/
        load_tree() {
            var data_data = {
                deptId: 1
            };

            get_organization_tree(data_data)
                .then(response => {
                    if (response.data.code == 200) {
                        this.data = response.data.depts;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        }
        /***********加载组织树***********/
    }
};
</script>